<script setup></script>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
    name: "Home",
    setup() {
        const message = ref("");

        return {
            message,
        };
    },
    data: () => {
        return {
            url: 'http://127.0.0.1:8000/plates/download?image_name=',
            plates: [],
            selectedDate: "",
            selectedProvince: "",
            showProvinceDropdown: false,

            dailyRecords: [],
            provinceRecords: [],
            currentPage: "home", // 确保初始值正确
            parkingStatus: "正常",
            activePlates: [],
            showDailyNotFound: false,
            showProvinceNotFound: false,
            feeSettings: {
                feeWithin1Hour: 5, // 默认值
                feeAfter1Hour: 2, // 默认值
                feeWithin24Hours: 50, // 默认值
            },
            selectedDateRange1:
                new Date().getFullYear() +
                "-" +
                (new Date().getUTCMonth() + 1) +
                "-" +
                new Date().getUTCDate(),
            selectedDateRange2:
                new Date().getFullYear() +
                "-" +
                (new Date().getUTCMonth() + 1) +
                "-" +
                new Date().getUTCDate(),
        };
    },
    methods: {
        async fetchPlates() {
            try {
                const response = await axios.get("http://localhost:8000/plates/unactive");
                this.plates = response.data.plates;
            } catch (error) {
                console.error("获取车牌记录失败:", error);
            }
        },

        async fetchActivePlates() {
            try {
                const response = await axios.get("http://localhost:8000/plates/unactive");
                this.activePlates = response.data.plates;
            } catch (error) {
                console.error("获取车位状态失败:", error);
            }
        },
    },
    created() {
        this.fetchPlates();
        this.fetchActivePlates();

        setInterval(this.fetchActivePlates, 5000);
        setInterval(this.fetchPlates, 2000);  // 添加这行代码，每2秒刷新一次
    },
};
</script>

<template>
    <div style="height: 100%">
        <div>
            <h1 class="text-center mb-4">异常车辆</h1>
            <!-- 修改标题 -->
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th scope="col">车牌号</th>
                            <th scope="col">进入时间</th>
                            <th scope="col">入场图片</th>
                            <th scope="col">操作</th>
                            <!-- 删除离开时间列 -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="plate in plates" :key="plate.id">
                            <td>{{ plate.plate_number }}</td>
                            <td>{{ plate.enter_time }}</td>
                            <td><el-image style="height: 60px;width: 150px;" :src="url + plate.filename"
                                    :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                    :preview-src-list="[url + plate.filename]" show-progress :initial-index="4"
                                    fit="cover" /></td>
                            <td><el-button type="info" @click="offCar(plate.plate_number)">出场</el-button></td>
                            <!-- 删除离开时间列 -->
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
const offCar = async(plate_number)=>{
      try {
        await ElMessageBox.confirm('确认出场?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            const response = await axios.post("http://localhost:8000/plates/offCarAbnormal", {
                plate_number: plate_number
            }); 
            if(response.status===200){
                ElMessage.success(plate_number + "出场成功")
            }
        })
      } catch (error) {
        console.error("获取车牌记录失败:", error);
      }
}
</script>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}

.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
